<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import axios from "axios";
const route = useRoute();
const router = useRouter();
const inputVal = ref("");
const hotArr = ref([]);
const items = ref([]);
const getItems = async () => {
  let { data } = await axios.get("http://localhost:3000/urlList");
  data.forEach((item) => {
    let name = item.name.toLowerCase().includes(route.params.id.toLowerCase());
    let label = item.label.toLowerCase().includes(route.params.id.toLowerCase());
    let briefly = item.briefly.toLowerCase().includes(route.params.id.toLowerCase());
    if (briefly || label || name) {
      items.value.push(item);
    }
  });
};

const getHotArr = async () => {
  let { data } = await axios.get("http://localhost:3000/urlList");
  for (let i = 0; i < 10; i++) {
    let datas = data;
    let rIndex = Math.floor(Math.random() * datas.length);
    hotArr.value.push(datas.splice(rIndex, 1)[0]);
  }
};
onMounted(async () => {
  getHotArr();
  getItems();
});
const goSearch = () => {
  if (inputVal.value != "" || inputVal.value.length > 0) {
    // console.log(inputVal.value);
    router.push(`/search${inputVal.value}`);
    items.value = [];
    getItems();
  } else {
    ElMessage.warning("请输入你需要搜索的内容");
  }
};
const goMain = (id) => {
  router.push(`/main?id=${id}`);
};
</script>

<template>
  <div class="search">
    <div class="searchInp">
      <input
        type="text"
        placeholder="请输入你的内容"
        v-model.trim="inputVal"
        @keyup.enter="goSearch"
      />
      <div class="icon" @click="goSearch"><i class="iconfont icon-sousuo"></i></div>
    </div>
    <div class="title">
      <i class="iconfont icon-sousuo"></i>"{{ route.params.id }}"的搜索结果：
    </div>
    <ul class="content" v-if="items.length > 0">
      <li v-for="item in items" :key="item.id" @click="goMain(item.id)">
        <img :src="item.img" alt="" />
        <div class="text">
          <span>{{ item.name }}</span>
          <p>{{ item.briefly }}</p>
        </div>
        <div class="icon">
          <i class="iconfont icon-yuanjiantou"></i>
        </div>
      </li>
    </ul>
    <el-empty description="亲~没有搜索到你想要的结果哦~" v-else />
    <div class="hot">
      <div class="top">
        <i class="iconfont icon-remen"></i>
        <h3>热门网址</h3>
        <div class="line"></div>
      </div>

      <ul>
        <li v-for="item in hotArr" :key="item.id" @click="goMain(item.id)">
          <img :src="item.img" alt="" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/homePage/search/index.scss");
/* 滚动条整体样式 */
::-webkit-scrollbar {
  width: 3px; /* 滚动条宽度 */
  height: 1px; /* 横向滚动条高度 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background: #b895a7; /* 滑块颜色 */
  border-radius: 5px; /* 滑块圆角 */
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background: #f0f0f0; /* 滚动条轨道颜色 */
  border-radius: 5px; /* 轨道圆角 */
}
</style>
